<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      cancelText="取消"
      okText="确认"
      width="30%"
      @ok="submit"
      @cancel="cancel"
    >
      <a-form ref="formRef" :model="modelForm.data" :rules="formRules">
        <a-form-item label="渠道来源" name="chnName" v-bind="validateInfos.chnName">
          <a-input v-model:value="modelForm.data.chnName" placeholder="请输入" :maxlength="100"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { reactive, ref, toRaw } from "vue";
import { Form, message } from "ant-design-vue";
import { save, update, details } from "@/api/module/channel-source";

const useForm = Form.useForm;
export default {
  name: "school",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "新增渠道来源",
    },
    formId: [ String, Number]
  },
  setup(props, content) {
    const formRef = ref();
    const state = reactive({
      visible: props.visible,
      title: props.title,
    })
    const modelForm = reactive({
      data: {
        chnName: '',
        isDel: 0,
        chnStatus: 0
      },
    });

    const formRules = {
      chnName: [
        { required: true, message: "请输入渠道来源", trigger: "change" },
      ],
    };

    const getDetails = () => {
      if (!props.formId) return
      return details({ id: props.formId }).then((res) => {
        if (res.success) {
          modelForm.data = reactive({
            ...modelForm.data,
            ...res.data,
          });
        }
      });
    }
    getDetails();
    const { resetFields, validate, validateInfos } = useForm(modelForm.data, formRules)


    const submit = () => {
      formRef.value.validate().then(() => {
        const result = toRaw(modelForm.data);
        if (result.id) {
          update(result)
            .then((res) => {
              if (res.success) {
                message
                  .success({ content: "保存成功", duration: 1 })
                  .then(() => {
                    content.emit("close", "modalVisible");
                    formRef.value.resetFields();
                  });
              } else {
                message.warning({ content: "保存失败", duration: 1 });
              }
            })
            .catch((err) => {
              console.log("err: ", err);
              message.warning({ content: "保存失败", duration: 1 });
            });
        } else {
          save(result)
            .then((res) => {
              if (res.success) {
                message
                  .success({ content: "保存成功", duration: 1 })
                  .then(() => {
                    content.emit("close", "modalVisible");
                    formRef.value.resetFields();
                  });
              } else {
                message.warning({ content: "保存失败", duration: 1 });
              }
            })
            .catch((err) => {
              message.warning({ content: "保存失败", duration: 1 });
            });
        }
      });
    }
    const cancel = () => {
      content.emit("close", "modalVisible");
    }

    return {
      state,
      modelForm,
      formRef,
      formRules,
      resetFields,
      validateInfos,
      submit,
      cancel,
    };
  },
};
</script>

<style scoped>
</style>
